<form action="#" class="am-form">
    <fieldset>
    </fieldset>
</form>

<style type="text/css">
    .big {
        float: left;
        width: 200px;
        text-align: center;
    }
    .form_content img {
        border: 1px solid black;
    }
    .big div {
        font-size: 14px;
    }
    .big input {
        margin:auto;
        margin-top: 5px;
    }
</style>

<script>
    var ads = [];

    // 填充内容
    var div = $("fieldset");
    var arr = ['一', '二', '三', '四', '五'];
    for (var i in arr) {
        div.append('<legend>第' + arr[i] + '张</legend>');
        var c = $('<div class="form_content i' + (parseInt(i) + 1) + '"></div>');
        var l = '<div class="big">' +
                    '<div><a href="#" value="' + i + '">删除</a></div>' +
                    '<img src="../public/all/images/upload.jpg" width="300px" class="big"/>' +
                    '<input type="file" class="img" data-url="/tephra/ctrl-http/upload" multiple>' +
                '</div>' +
                '<div class="clear"></div>';
        c.append(l);
        div.append(c);
    }
    $("fieldset .big a").click(function(e) {
        if (confirm("确定删除此图片吗？")) {
            var index = $(e.currentTarget).attr("value");
            ads[parseInt(index) + 1] = '';
            var img = $(".i" + (parseInt(index) + 1) + " .big img");
            img.attr("src", "");
            Classify.saveExt("settings", "ads_phone", ads);
        }
    })

    // 上传图片的逻辑
    function upload_a_file(index) {
        var input = $(".i" + index + " .big input");
        input.change(function() {
            // 上传图片
            console.log("上传文件", input[0].files[0]);
            var data = new FormData();
            data.append("eddy.message.image", input[0].files[0]);
            startLoading();
            CMD.upload(data, null, function(r) {
                stopLoading();
                on_upload_ok(index, r);
                alert2("图片上传成功。");
            });
        });
    }

    // 设置图片
    function set_img_url(index, url) {
        var img = $(".i" + index + " .big img");
        if (url == '') img.attr("src", "");
        else {
            var url2 = context.config.url.replace(":9090", "");
            img.attr("src", url2 + url);
        }
    }

    function on_upload_ok(index, data) {
        // 图片赋值
        set_img_url(index, data);

        // 通知服务器内容
        ads[index] = data;
        Classify.saveExt("settings", "ads_phone", ads);
    }
    for (var i = 1; i <= 5; i++) {
        upload_a_file(i);
    }

    // 刷新配置信息
    Classify.queryExt("settings", "ads_phone", true, [], function(r) {
        ads = r;
        for (var i in ads) {
            if (ads[i]) set_img_url(i, ads[i]);
        }
    });
</script>